<template>
	<view>
		<view class="conts">
			<view class="conts_title">
				<text class="conts_text1">个</text>
				<text class="conts_text2">JAVEN.ZHANG 美发师</text>
				<text class="icon iconfont">&#xe6f2;</text>
			</view>
			
			<view class="conts_boxs">
				<view class="pic">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238106379,3489467593&fm=26&gp=0.jpg" mode=""></image>
				</view>
				<view style="width: 100%;">
					<view class="conts_boxs_text1">
						洗剪吹
					</view>
					<view class="conts_boxs_text2">
						<view>
							<text class="fw">服务：</text><text class="xj">洗护+裁剪+造型 </text>
						</view>
						<view class="price">
							<text>￥365</text>
						</view>
					</view>
					<view class="conts_boxs_text2">
						<view>
							<text class="fw">用时：</text><text class="xj">预计1小时 </text>
						</view>
						<view class="price">
							<text>x1</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- //评分 -->
		<view class="score">
			<view class="score_left">
				<view>
					<text class="score_text">服务评价</text>
				</view>
				<view>
					<text class="number">4.8分</text>
				</view>
			</view>
			<view class="score_right">
				
				<view class="pin">
					<view class="pin_text">专业</view>
					<view>
						<uni-rate v-model="zhuan_number"  color='#D2D2D2' activeColor='#00C6C2' margin="10" size="16" @change="change"></uni-rate>
					</view>
					<view class="pin_number">
						{{zhuan_number}}
					</view>
				</view>
				<view class="pin">
					<view class="pin_text">服务</view>
					<view>
						<uni-rate v-model="serve_number"  color='#D2D2D2' activeColor='#00C6C2' margin="10" size="16" @change="change1"></uni-rate>
					</view>
					<view class="pin_number">
						{{serve_number}}
					</view>
				</view>
				<view class="pin">
					<view class="pin_text">环境</view>
					<view>
						<uni-rate v-model="huan_number"  color='#D2D2D2' activeColor='#00C6C2' margin="10" size="16" @change="change2"></uni-rate>
					</view>
					<view class="pin_number">
						{{huan_number}}
					</view>
				</view>
				<view class="pin">
					<view class="pin_text">效果</view>
					<view>
						<uni-rate v-model="guo_number"  color='#D2D2D2' activeColor='#00C6C2' margin="10" size="16" @change="change3"></uni-rate>
					</view>
					<view class="pin_number">
						{{guo_number}}
					</view>
				</view>
			</view>
		</view>
		<!-- 分享你的体验感受，可以帮助更多人哦！ -->
		<view class="share_fell">
			<view class="share_text">分享你的体验感受，可以帮助更多人哦！</view>
			<view style="height:100;display:flex;flex-wrap: wrap;margin-top: 181rpx;">
				<view v-for="(item, index) in imageList" :key="index">
					<view style="position:relative;width:120rpx;height:100rpx;display: flex;">
						<image style="width:120upx;height:100upx;" :src="item" :data-src="image" @tap="previewImage"></image>
						<view style="position:absolute; right: -10rpx; top: -10rpx; z-index:1000;" @tap="delect(index)">
							<text class="icon iconfont" style="color: red;">&#xe688;</text>
							<!--这个图标是指，图片或者视频上传成功了，点击右上角叉号（也就是这个图标）可以删除 这里自己找一个合适的替换掉就好-->
						</view>
					</view>
				</view>
				<!--视频-->
				<view v-for="(item1, index1) in srcVideo" :key="index1">
					<view style="position:relative;width:250rpx;height:200rpx;">
						<video style="width:120upx;height:100upx;" :src="item1"></video>
						<view style="position:absolute; right: -10rpx; top: -10rpx; z-index:1000;" @tap="delectVideo(index1)">
							<!-- <image style="width:30rpx;height:30rpx;" src="../../static/logo.png" mode=""></image> -->
							<text class="icon iconfont" style="color: red;">&#xe688;</text>
						</view>
					</view>
				</view>
				<view
					v-if="VideoOfImagesShow"
					@tap="chooseVideoImage"
					style="width: 120rpx;height:100rpx;background-color: #F1F1F1; display:flex; justify-content: center; align-items: center; flex-direction: column;">
					<view>
						<text class="icon iconfont">&#xe60e;</text>
					</view>
					<view style="font-size: 20rpx;font-family: PingFang;font-weight: 500;color: #B5B5B5;">图片/视频</view>
				</view>
			</view>
		</view>
		<!-- //服务评价 -->
		<view class="sereve_pin">
			<view v-for="(item,index) in list_cont" :key='index' :class="{active:item.status==true}" @click="choos(item)">
				{{item.name}}
			</view>
		</view>
		<!-- //发布 -->
		<view class="push">
			<text>发布</text>
		</view>
		<view style="height: 136rpx;"></view>
	</view>
</template>

<script>
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	export default {
		data(){
			return{
				zhuan_number:'1.0',
				serve_number:'1.0',
				huan_number:'1.0',
				guo_number:'1.0',
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				imageList: [], //存放图片的地址
				srcVideo: [],//视频存放的地址
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{ value: 'back', name: '后置摄像头', checked: 'true' }, { value: 'front', name: '前置摄像头' }],
				cameraIndex: 0,//上传视频时的数量
				list_cont:[
					{
					name:'服务热情',
					status:false
					},
					{
					name:'环境优雅',
					status:false
					},
					{
					name:'无隐形消费',
					status:false
					},
					{
					name:'非常好',
					status:false
					},
					
				
				],
				
			}
		},
		onUnload() {
			this.imageList = []
			this.sourceTypeIndex = 2
			this.sourceType = ['拍摄','相册','拍摄或相册'];
		},
		methods:{
			//专业
			change(e){
				console.log(e)
				this.zhuan_number = e.value.toString().padEnd(3,'.0')
			},
			//服务
			change1(e){
				console.log(e)
				this.serve_number = e.value.toString().padEnd(3,'.0')
			},
			//环境
			change2(e){
				console.log(e)
				this.huan_number = e.value.toString().padEnd(3,'.0')
			},
			//效果
			change3(e){
				console.log(e)
				this.guo_number = e.value.toString().padEnd(3,'.0')
			},
			//选择内容
			choos(item){
				console.log('xxx')
				console.log(item)
				if(item.status === false){
					item.status = true
				}else{
					item.status =false
				}
			},
			//点击上传图片或视频
			chooseVideoImage(){
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//上传图片
			chooseImages(){
				uni.chooseImage({
					count:4, //默认是9张
					sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success:res=>{
						this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)
						if(this.imageList.length == 4){
							this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
						}
					}
				})
			},
			//上传视频
			chooseVideo(index){
				uni.chooseVideo({
					maxDuration: 10,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 4,
					camera: this.cameraList[this.cameraIndex].value,//'front'、'back'，默认'back'
					sourceType: sourceType[this.sourceTypeIndex],
					success:res =>{
						this.srcVideo = this.srcVideo.concat(res.tempFilePath);
						if (this.srcVideo.length == 4) {
							this.VideoOfImagesShow = false;
						}
						console.log(this.srcVideo);
					}
				})
			},
			//预览图片
			previewImage: function(e){
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			// 删除图片
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length == 4) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.srcVideo.splice(index, 1);
						}
						if (this.srcVideo.length == 4) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.conts{
		padding: 39rpx 24rpx;
		background: white;
		.conts_title{
			display: flex;
			align-items: center;
			.conts_text1{
				display: inline-block;
				width: 36rpx;
				height: 20rpx;
				background: #00C6C2;
				border-radius: 8rpx;
				text-align: center;
				line-height: 20rpx;				
				font-size: 14rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
			.conts_text2{
				margin-left: 11rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #414141;
				margin-right: 11rpx;
			}
			.iconfont{
				color: #8E8E8E;
				font-size: 32rpx;
			}
		}
		.conts_boxs{
			display: flex;
			padding-bottom: 21rpx;
			margin-right: 24rpx;
			// border-bottom: 1rpx solid #B4B4B4;
			margin-top: 34rpx;
			.pic{
				width: 130rpx;
				height: 130rpx;
				margin-right: 24rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.conts_boxs_text1{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #000000;
				line-height: 30rpx;
			}
			.conts_boxs_text2{
				
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				.fw{
					
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
					line-height: 36rpx;
					
				}
				.xj{
					
					font-size: 24rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #777777;
					line-height: 36rpx;
				}
				.price{
					
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 30rpx;
				}
			}
		}
	}

//评分
.score{
	
	// height: 266rpx;
	padding: 37rpx 27rpx;
	background: #F4F4F4;
	display: flex;
	.score_left{
		margin-right: 66rpx;
		.score_text{
			
			font-size: 26rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			line-height: 30rpx;
		}
		.number{
			margin-top: 26rpx;			
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 30rpx;
		}
	}
	.score_right{
		.pin {
			display: flex;
			align-items: center;
			line-height: 30rpx;
			margin-bottom: 35rpx;
			.pin_text{
				transform: translateY(-7rpx);
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
			}
			.pin_number{
				margin-left: 20rpx;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
				line-height: 30rpx;
				transform: translateY(-7rpx);
			}
		}
	}
}
//分享
.share_fell{
	padding: 27rpx 26rpx;
	border-bottom: 1rpx solid #E0E0E0;
	.share_text{		
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #979797;
		line-height: 30rpx;
	}
	.add_pic{
		width: 120rpx;
		height: 100rpx;
		border: 1px solid #B5B5B5;
		text-align: center;
		margin-right: 10rpx;
		.add_text{
			
			font-size: 20rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #B5B5B5;
			line-height: 30rpx;
		}
	}
	.add_read{
		width: 120rpx;
		height: 100rpx;
		border: 1px solid #B5B5B5;
	}
}

//服务评价
.sereve_pin{
	padding: 36rpx 70rpx 99rpx 26rpx;
	view{
		display: inline-block;
		margin-bottom: 20rpx;
		margin-right: 10rpx;
		padding: 0 25rpx;
		// width: 160rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;		
		font-size: 26rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #979797;
		border: 1rpx solid #D2D2D2;
		border-radius: 4rpx;
	}
	.active{
		
		border: 1px solid #00C6C2;
		color: #00C6C2;
	}
}
//发布
.push{
	
	height: 88rpx;
	background: #00C6C2;
	text-align: center;
	line-height: 88rpx;
	
	text{
		opacity: 0.8;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>
